// 后续再看看
<template>
  <div class="DiologS">
    <el-dialog title="选择地址" :visible.sync="dialogFormVisible7">
      <div class="dialogk">
        <el-radio
          v-model="radio"
          label="1"
        >吉林省 长春市 高新技术开发区 平新路325号 3号厂房 301 张三（收） 18600000000吉林省 长春市 高新技术开发区 平新路325号 3号厂房 301 张三（收） 18600000000</el-radio>
        <el-button size="mini" type="primary">默认</el-button>
        <el-button type="text">编辑</el-button>
        <el-radio v-model="radio" label="2">吉林省 长春市 高新技术开发区 平新路325号 3号厂房 301 张三（收） 18600000000</el-radio>
        <p></p>
        <el-button type="text" @click="dialogFormVisible8 = true">
          <i>+</i> 新增地址
        </el-button>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible7 = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible7 = false">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增地址" :visible.sync="dialogFormVisible8">
      <div class="dialogk2">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="收货人" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="tel">
            <el-input v-model="ruleForm.tel"></el-input>
          </el-form-item>
          <el-form-item label="所在地区" prop="region">
            <el-select v-model="ruleForm.region1" placeholder="请选择省份" size="mini">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
            <el-select v-model="ruleForm.region2" placeholder="请选择城市" size="mini">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
            <el-select v-model="ruleForm.region3" placeholder="请选择所在区" size="mini">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详细地址" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible8 = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible8 = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "elDialogs",

  data() {
    return {
      radio: "1",
      dialogFormVisible7: false,
      dialogFormVisible8: false,
      ruleForm: {
        name: "",
        tel: "",
        region1: "",
        region2: "",
        region3: "",
        desc: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入收货人姓名", trigger: "blur" }
        ],
        tel: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
        region1: [{ required: true, message: "请选择省份", trigger: "change" }],
        region2: [{ required: true, message: "请选择城市", trigger: "change" }],
        region3: [{ required: true, message: "请选择区域", trigger: "change" }],
        desc: [{ required: true, message: "请填写详细地址", trigger: "blur" }]
      }
    }
  },

  methods: {
    handleClose(done) {
      this.$confirm("")
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  },

  mounted() {
    console.log(this.dialogFormVisibles)
  }
}
</script>
<style lang="scss" scoped>
.DiologS {
  width: 1200px;
  margin: auto;
  h4 {
    line-height: 50px;
  }
  .flexk {
    width: 1128px;
    height: 47px;
    line-height: 47px;
    background: #f4f4f4;
    border: 1px solid #e2e2e2;
    padding: 0 36px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    p {
      width: 700px;
    }
  }
  .el-dialog {
    .el-dialog__body {
      .dialogk {
        width: 100%;
        position: relative;
        .el-radio {
          width: 78%;
          display: inline-block;
          word-break: break-all; // 超出部分换行
          white-space: normal; // 超出部分换行
          .el-radio__label {
            display: inline-block;
            width: 80%;
            overflow: hidden;
          }
        }
        .el-radio + .el-radio {
          margin-left: 0px;
          padding-top: 15px;
        }
      }
      .dialogk2 {
        width: 480px;
        margin: auto;
      }
      .el-button[size="mini"] {
        margin-left: 10px;
      }
    }
  }
}
</style>

